<html>
<head>
<title>firstPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#Table_01 tr td {
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
	font-size:13px;
	font-color:#378eee;
}
-->
.hightlight {
    border:2px solid #9F1319;
    background:url(index_images/iconCaution.gif) no-repeat 2px;
    background-image:"";
    border:"";
    z-index:1;
}

</style>
<link rel="stylesheet" href="/studentflow/js/jquery-ui-1.8.18.custom.css">
<script src="/studentflow/js/jquery.js"></script>
<script src="/studentflow/js/jquery.bgiframe-2.1.2.js"></script>
<script src="/studentflow/js/jquery.ui.core.js"></script>
<script src="/studentflow/js/jquery.ui.widget.js"></script>
<script src="/studentflow/js/jquery.ui.mouse.js"></script>
<script src="/studentflow/js/jquery.ui.draggable.js"></script>
<script src="/studentflow/js/jquery.ui.position.js"></script>
<script src="/studentflow/js/jquery.ui.resizable.js"></script>
<script src="/studentflow/js/jquery.ui.dialog.js"></script>



<script type="text/javascript">

$('document').ready(function(){
	

	$("#login").submit(function(event) {

	    /* stop form from submitting normally */
	    event.preventDefault(); 
	        
	    /* get some values from elements on the page: */
	    var form = $( "#login" );
	        var username = $( "#username" ).val();
	        var password = $( "#password" ).val();
	        console.log(username);
	        console.log(password);

	    /* Send the data using post and put the results in a div */
	    $.post( "login/login.action",
	    		{ username: username, password:password},
	    		function(response) {
	    		    // log the response to the console
	    		    if(response.success){
	    		    	window.location = 'main.jsp';
	    		    }else{
	    		    	alert("Username or Password Incorrect");
	    		    }
	    		    console.log("Response: "+response);
	    		}

	    );
	  });
	

	
	$("#register").submit(function(event) {
	
	    /* stop form from submitting normally */
	    event.preventDefault(); 
	        
	    /* get some values from elements on the page: */
		    var form = $( "#register" );
		    var firstname = $( "#firstname" ).val();
	        var lastname = $( "#lastname" ).val();
	        var email = $( "#email" ).val();
	        var username = $( "#usernameR" ).val();
	        var password = $( "#passwordR" ).val();
	        console.log(username);
	        console.log(password);

	    /* Send the data using post and put the results in a div */
	    $.post( "login/register.action",
	    		{ username: username, 
	    			password:password,
	    			firstName:firstname,
	    			lastName:lastname,
	    			email:email	    			
	    			},
	    		function(response) {
	    		    // log the response to the console
	    		    if(response.success){
	    		    	
	    		    	$( "#dialog" ).dialog({
	    		    		autoOpen: false,
	    		    		show: "blind",
	    		    		hide: "explode",
	    		    		modal: true,
	    					buttons: {
	    						"Done": function() {
	    							$( this ).dialog( "close" );
	    							$( "#firstname" ).val('');
	    							$( "#lastname" ).val('');
	    							$( "#email" ).val('');
	    							$( "#usernameR" ).val('');
	    							$( "#passwordR" ).val('');
	    						}
	    		    	}}).dialog( "open" );
	    		    
	    		    
	    		}
	    			}

	    );
	  });
	



});

</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (firstPage.psd) -->
<div id="dialog" title="Congratulations" style="display:none;">
	<p>Thank you for your registration. You may now Sign in to the application  </p>
</div>
<table align="center" width="100%">

<tr>

<td background="index_images/index_01.gif">
<table id="Table_01" width="1163" height="717" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td rowspan="25" background="index_images/index_01.gif" width="100%" height="100%"></td>
		<td rowspan="21">
			<img src="index_images/index_02.gif" width="34" height="625" alt=""></td>
		<td rowspan="6">
			<img src="index_images/index_03.gif" width="375" height="64" alt="ASK-LDT 2.0"></td>
		<td colspan="15">
			<img src="index_images/index_04.gif" width="711" height="9" alt=""></td>
		<td rowspan="25" background="index_images/index_05.gif" width="100%">
        	<img src="index_images/index_05.gif" width="100%" />
        </td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="9" alt=""></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="2">
			<img src="index_images/index_06.gif" width="455" height="17" alt=""></td>
		<td colspan="2">
            <input type="submit"  style="background-image:url(index_images/index_07.gif); width:100%; height:14px; border:none" value=""/></td>
		<td colspan="5" rowspan="2">
			<img src="index_images/index_08.gif" width="134" height="17" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="index_images/index_09.gif" width="122" height="3" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
    <form action="" method="post" id="login" name="login">
		<td colspan="2" rowspan="13">
			<img src="index_images/index_10.gif" width="177" height="419" alt=""></td>
		<td rowspan="2" background="index_images/index_11.gif"><input type="text" autocomplete="off" id="username" name="username" width="189px"  style="background-image:url(index_images/index_11.gif); height:33px; width:100%; border:none;"/>
			</td>
		<td colspan="3" rowspan="4">
			<img src="index_images/index_12.gif" width="18" height="163" alt=""></td>
		<td colspan="3" rowspan="2"><input type="password" autocomplete="off" name="password" id="password" width="189px" style="background-image:url(index_images/index_13.gif); height:33px; width:100%; border:none;"/></td>
		<td colspan="2" rowspan="4">
			<img src="index_images/index_14.gif" width="9" height="163" alt=""></td>
		<td colspan="3"><input type="submit" id="login" style="background-image:url(index_images/index_15.gif); width:100%; height:30px; border:none" value=""/></td>
		<td rowspan="18">
			<img src="index_images/index_16.gif" width="46" height="599" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="30" alt=""></td>
	</form>
    </tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="index_images/index_17.gif" width="83" height="133" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td rowspan="16">
			<img src="index_images/index_18.gif" width="189" height="566" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="index_images/index_19.gif" width="189" height="130" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td rowspan="10">
			<img src="index_images/index_20.gif" width="375" height="381" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="125" alt=""></td>
	</tr>
	<form action="" method="post" id="register" name="register">
	<tr>
		<td colspan="2" rowspan="2">
			<img src="index_images/index_21.gif" width="12" height="57" alt=""></td>
		<td colspan="7"><input type="text" width="281px" autocomplete="off" id="firstname" name="firstname" style="background-image:url(index_images/index_22.gif); height:30px; border:none; width:100%;"/></td>
		<td colspan="2" rowspan="6">
			<img src="index_images/index_23.gif" width="7" height="172" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="index_images/index_24.gif" width="280" height="27" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img src="index_images/index_25.gif" width="11" height="379" alt=""></td>
		<td colspan="8"> 
            <input type="text" width="281px" autocomplete="off" id="lastname" name="lastname" style="background-image:url(index_images/index_26.gif); height:31px; border:none; width:100%;"/></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="31" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="index_images/index_27.gif" width="281" height="26" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td rowspan="10">
			<img src="index_images/index_28.gif" width="1" height="322" alt=""></td>
		<td colspan="7">
			
            <input type="text" width="280px" autocomplete="off" id="email" name="email" style="background-image:url(index_images/index_29.gif); height:30px; border:none; width:100%;"/></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="index_images/index_30.gif" width="280" height="28" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
            <input type="text" width="281px" autocomplete="off" id="usernameR" name="usernameR" style="background-image:url(index_images/index_31.gif); height:30px; border:none; width:100%;"/></td>
		<td rowspan="8">
			<img src="index_images/index_32.gif" width="6" height="264" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="index_images/index_33.gif" width="281" height="26" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="2">
            <input type="password" width="281px" autocomplete="off" id="passwordR" name="passwordR" style="background-image:url(index_images/index_34.gif); height:30px; border:none; width:100%;"/>
            </td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	
	<tr>
		<td colspan="2" rowspan="4">
			<img src="index_images/index_35.gif" width="423" height="106" alt=""></td>
		<td rowspan="5">
			<img src="index_images/index_36.gif" width="129" height="180" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="8">
			<img src="index_images/index_37.gif" width="281" height="60" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="60" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="index_images/index_38.gif" width="64" height="118" alt=""></td>
		<td colspan="6">
			
            <input type="submit" style="background-image:url(index_images/index_39.gif); width:100%; height:32px; border:none" value=""/>
            </td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="32" alt=""></td>
	</tr>
	</form>
	<tr>
		<td colspan="6" rowspan="2">
			<img src="index_images/index_40.gif" width="217" height="86" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="12" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="index_images/index_41.gif" width="423" height="74" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="74" alt=""></td>
	</tr>
	<tr>
		<td height="100%" colspan="17" background="index_images/index_42.gif" bgcolor="#FFFFFF"></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="17">
			<img src="index_images/index_43.gif" width="1120" height="13" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="13" alt=""></td>
	</tr>
	<tr>
		<td colspan="17" align="center" background="index_images/index_44.gif"><p style="color: #1e75d5">Home - About Us - IMS Learning Design Specification</p></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="47" alt=""></td>
	</tr>
	<tr>
		<td colspan="17">
			<img src="index_images/index_45.gif" width="1120" height="12" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="12" alt=""></td>
	</tr>
	<tr>
		<td height="2">
			<img src="index_images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="375" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="48" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="129" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="189" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="58" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="118" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="76" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="46" height="1" alt=""></td>
		<td>
			<img src="index_images/spacer.gif" width="21" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<input type="text" width="280px" style="background-image:url(index_images/index_22.gif); height:30px; border:none; width:100%;"/></td>

</tr>

</table>

<!-- End Save for Web Slices -->
</body>
</html>